<template>
  <div>
    <div class="header">
      <mt-header title="电影详情">
        <router-link to="/" slot="left">
          <!-- <mt-button icon="back"></mt-button> -->
          <mt-button @click="handleback">返回</mt-button>
        </router-link>
        <!-- <mt-button icon="more" slot="right"></mt-button> -->
      </mt-header>
    </div>
    <div v-if="filminfo" class="film-info">
        <div class="posterimg"><img :src="filminfo.poster" alt=""></div>
        <div class="film-detail">
          <div class="col">
            <div class="film-name">
              <span class="filmname" >{{filminfo.name}}</span>
              <span class="item">{{filminfo.item.name}}</span>
            </div>
            <div class="film-grade" v-if="filminfo.grade">观众评分：{{filminfo.grade}}分</div>
          </div>
          <div class="film-category grey-text">{{filminfo.category | formatCategory}}</div>
          <div class="film-premiere-time grey-text">{{filminfo.premiereAt | formatDate}} 上映</div>
          <div class="film-nation-runtime grey-text">{{filminfo.nation}} | {{filminfo.runtime}}分钟</div>
          <div class="text grey-text" :class="showSynopsis ? 'show' : '' " ref="synopsisShow">
            <div class="film-synopsis show-synopsis">{{filminfo.synopsis}}</div>
            <div class="iconfont icon-top-line ico" v-if="showSynopsis" @click="handleSynopsis"></div>
            <div class="iconfont icon-xia1 ico" v-else @click="handleSynopsis"></div>
          </div>
        </div>
        <div class="film-actors">
          <div class="actor">演职人员</div>
          <div class="film-actors-swiper">
            <swiper perview="4" class="actorswiper" myclassname="actorswiper">
              <div class="swiper-slide" v-for="data in filminfo.actors" :key="data.name" >
                <img :src="data.avatarAddress" alt="">
                <p>{{data.name}}</p>
                <p>{{data.role}}</p>
              </div>
            </swiper>
          </div>
        </div>
        <div class="film-photos">
          <div class="film-photos-header">
            <div class="photos">剧照</div>
            <div class="all">全部({{this.filminfo.photos.length}})<span class="iconfont icon-changyongicon-"></span></div>
          </div>
          <div class="film-photos-swiper">
            <swiper  perview="3" class="photoswiper" myclassname="photoswiper">
              <div class="swiper-slide photo-item" v-for="(data,index) in filminfo.photos" :key="index" style="height:115px;background:rgb(255.255.255)">
                <img :src="data" alt="">
              </div>
            </swiper>
          </div>
        </div>
    </div>
        <div class="buy-ticket">
      选座购票
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Header } from 'mint-ui'
import axios from 'axios'
import swiper from './Detail/DetailSwiper.vue'
Vue.component(Header.name, Header)

Vue.filter('formatDate', function (data) {
  function add0 (m) { return m < 10 ? '0' + m : m }
  var newtime = data * 1000
  var time = new Date(newtime)
  var y = time.getFullYear()
  var m = time.getMonth() + 1
  var d = time.getDate()
  return y + '-' + add0(m) + '-' + add0(d)
})
Vue.filter('formatCategory', function (category) {
  return category.replace(/\|/g, ' | ')
})
export default {
  data () {
    return {
      filminfo: null,
      showSynopsis: false
    }
  },
  beforeMount () {
    this.$store.commit('HideMaizuoTabbar', false)
    // this.$store.state.isTabbarShow = false
  },
  mounted () {
    // console.log('获取动态路由传到详情页面的myid:', this.$router)
    axios({
      url: `https://m.maizuo.com/gateway?filmId=${this.$route.params.myid}&k=1181437`,
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16240805423101872625811457","bc":"110100"}',
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      this.filminfo = res.data.data.film
      // console.log(this.filminfo)
    })
  },
  beforeDestroy () {
    /*
    第一个参数是mutation中定义的方法名 ，第二个参数为传参
    */
    this.$store.commit('ShowMaizuoTabbar', true)
    // this.$store.state.isTabbarShow = true
  },
  components: {
    swiper
  },
  methods: {
    handleback () {
      this.$router.go(-1)
    },
    handleSynopsis () {
      this.showSynopsis = !this.showSynopsis
    }
  }
}
</script>
<style lang="scss" scoped>
.header {
  z-index: 100;
}
.film-info{
  position: relative;
  width: 100%;
  height: 100%;
  // padding-bottom: 20px;
  .posterimg {
    width: 100%;
    height: 230px;
    background: #fff;
    position: relative;
    overflow: hidden;
    top: 0%;
    left:0%;
    float: left;
    opacity: 1;
    display:block;
    img{
      width:100%;
      position:relative;
      top:50%;
      left:0%;
      transform: translateY(-50%);
      -ms-transform:translateY(-50%);
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
    }
  }
  .film-detail{
    width:100%;
    margin:0px 0px 10px 0px;
    .col {
      margin:0px 10px;
      .film-name {
        width: 100%;
        .filmname {
          color: #191a1b;
          font-size: 18px;
          height: 30px;
          line-height: 30px;
          // margin-right: 7px;
          margin-top: 20px;
        }
        .item {
          font-size: 9px;
          color: #fff;
          background-color: #d2d6dc;
          height: 14px;
          line-height: 14px;
          padding: 0 2px;
          border-radius: 2px;
          display: inline-block;
        }
      }
      .film-grade {
        font-size: 13px;
        color: #ffb232;
        margin-top: 4px;
      }
    }
    .grey-text {
      margin:0px 10px;
      font-size: 13px;
      color: #797d82;
      margin-top: 4px;
    }
    .text {
      width:600;
      height: 60px;
      overflow: hidden;
      margin: 4px 10px;
      div {
        display: block;
      }
      .film-synopsis {
        overflow: hidden;
        height: 40px;
      }
      div:nth-child(2) {
        height:20px;
        color:#000;
        text-align: center;
      }
    }
    .show {
      margin:0px 10px;
      height:auto;
      .film-synopsis{
        height:auto;
      }
    }
  }
  .film-actors {
    width:100%;
    // padding:0px 10px 0px 10px;
    border-top:15px solid #eee;
    border-bottom:15px solid #eee;
    .actor {
      margin:0px 10px;
      padding:5px 0px;
      font-size: 16px;
      text-align: left;
      color: #191a1b;
    }

    .film-actors-swiper {
      .actorswiper {
        margin:0px 10px 0px 10px;
      }
      div {
        p {
          text-align: center;
          width: 85px;
          height: 18px;
          display: block;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
          color: #191a1b;
        }
        p:nth-child(2) {
          padding-top: 5px;
        }
        p:nth-child(3) {
          font-size: 10px;
          color: #797d82;
        }
      }
    }
  }
  .film-photos {
    width:100%;
    border-bottom:65px solid #eee;
    .film-photos-header {
      width:100%;
      height: 50px;
      .photos {
        padding-left:10px;
        float: left;
        width: 30%;
        height:50px;
        line-height:50px;
        font-size: 16px;
      }
      .all {
        padding-right: 10px;
        text-align: right;
        float:right;
        width: 30%;
        height : 50px;
        line-height:50px;
        font-size: 16px;
        span {
          display: inline-block;
          height : 50px;
          line-height:40px;
          color: #000;
          font-size: 16px;
        }
      }
    }
    .film-photos-swiper {
      .photoswiper {
        margin:0 10px;
        .photo-item {
          width:auto;
          height: 150px;
          line-height: 150px;
          overflow: hidden;
        }
      }
    }
  }
}
.buy-ticket {
  z-index: 1;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  text-align: center;
  background-color: #ff5f16;
  color: #fff;
  font-size: 16px;
  line-height: 49px;
}
</style>
